<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优购首页</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <!-- 所有页面共有头部 -->
    <header>
        <div class="nav">
            <!-- 头部左侧文字链接 -->
            <ul class="nav-left">
                <li class="conweixin">
                    <a href="javascript:;">关注</a>
                    <div class="weixin">
                        <div class="weixin-con">
                            <img src="img/weChat.jpg" alt="">
                            <p>关注公众号</p>
                        </div>
                    </div>
                </li>
                <li class="loadapp">
                    <a href="javascript:;">下载APP</a>
                    <div class="app">
                        <div class="app-con">
                            <img src="img/app.jpg" alt="">
                            <p>优购app下载</p>
                        </div>
                    </div>
                </li>
            </ul>

            <!-- 头部右侧文字链接 -->
            <ul class="nav-right">
                <li class="first">
                    <a href="login.html" class="login">登录</a>
                    <span>/</span>
                    <a href="register.html" class="register">注册</a>
                </li>
                <li class="collect">
                    <a href="#"><i></i>收藏</a>
                </li>
                <li class="bag">
                    <a href="javascript:;"><i></i>购物袋</a>
                </li>
                <li class="publicword">
                    <a href="javascript:;">公告</a>
                    <div class="public">
                        <ul class="public-con">
                            <li><a href="javascript:;" class="red">近期物流情况安排通知</a></li>
                            <li><a href="javascript:;">优购客服电话变更</a></li>
                            <li><a href="javascript:;">关闭分享购频道</a></li>
                            <li><a href="javascript:;">提醒会员谨防诈骗电话</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </header>

    <!-- logo区 -->
    <!-- logo图 -->
    <h1>
        <a href="javascript:;"><img src="img/logo.png" alt=""></a>
    </h1>
    <div class="logo">

        <!-- 首页列表 -->
        <div class="list">
            <ul class="list-con">
                <li><a href="index.html">首页</a></li>
                <li>
                    <a href="#">女鞋</a>
                    <!-- 女鞋 -->
                    <div class="listall">
                        <div class="listall-con">
                            <dl class="dl-first dl-duo">
                                <dt><a href="#" target="_blank">品牌</a></dt>
                                <dd>
                                    <a href="#" target="_blank">百丽</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">他她</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">天美意</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">思加图</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">森达</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">真美诗</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">妙丽</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">拔佳</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">暇步士</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">百思图</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">圣伽步</a>
                                </dd>
                            </dl>
                            <dl class="dl-shao">
                                <dt><a href="#" target="_blank">热销推荐</a></dt>
                                <dd>
                                    <a href="#" target="_blank">2020新款单鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">专柜同款</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">人气TOP</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">老爹鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">乐福鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">小白鞋</a>
                                </dd>
                            </dl>
                            <dl class="dl-shao">
                                <dt><a href="#" target="_blank">女士靴子</a></dt>
                                <dd>
                                    <a href="#" target="_blank">短靴</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">中靴</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">长靴</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">绒里靴</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">马丁靴</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">雪地靴</a>
                                </dd>
                            </dl>
                            <dl class="dl-duo">
                                <dt><a href="#" target="_blank">女士单鞋</a></dt>
                                <dd>
                                    <a href="#" target="_blank">浅口鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">满帮鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">尖头鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">乐福鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">玛丽珍</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">英伦风</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">休闲鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">运动鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">高跟鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">平底鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">细跟鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">粗跟鞋</a>
                                </dd>
                            </dl>
                            <dl class="dl-shao">
                                <dt><a href="#" target="_blank">女士凉鞋</a></dt>
                                <dd>
                                    <a href="#" target="_blank">2020新款</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">穆勒凉鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">中空凉鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">纯凉鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">凉拖</a>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#">男鞋</a>
                    <!-- 男鞋 -->
                    <div class="listall">
                        <div class="listall-con">
                            <dl class="dl-first dl-duo">
                                <dt><a href="#" target="_blank">品牌</a></dt>
                                <dd>
                                    <a href="#" target="_blank">百丽</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">森达</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">暇步士</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">拔佳</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">天美意</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">他她</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">百思图</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">伐拓</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">圣伽步</a>
                                </dd>
                            </dl>
                            <dl class="dl-shao">
                                <dt><a href="#" target="_blank">热销推荐</a></dt>
                                <dd>
                                    <a href="#" target="_blank">2020新款</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">专柜同款</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">热销TOP</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">小白鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">老爹鞋</a>
                                </dd>
                            </dl>
                            <dl class="dl-duo">
                                <dt><a href="#" target="_blank">精选分类</a></dt>
                                <dd>
                                    <a href="#" target="_blank">正装鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">休闲鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">系带鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">懒人鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">乐福鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">布洛克鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">满帮鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">纯凉鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">冬靴</a>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#">运动</a>
                    <!-- 运动 -->
                    <div class="listall">
                        <div class="listall-con">
                            <dl class="dl-first dl-duo">
                                <dt><a href="#" target="_blank">品牌</a></dt>
                                <dd>
                                    <a href="#" target="_blank">阿迪达斯</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">耐克</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">三叶草</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">阿迪休闲</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">彪马</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">匡威</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">鬼冢虎</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">亚瑟士</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">锐步</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">万斯</a>
                                </dd>
                            </dl>
                            <dl class="dl-duo">
                                <dt><a href="#" target="_blank">运动鞋</a></dt>
                                <dd>
                                    <a href="#" target="_blank">跑步鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">休闲鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">复刻鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">篮球鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">户外鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">帆布鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">网球鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">综训鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">健步鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">足球鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">凉鞋/拖鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">包配</a>
                                </dd>
                            </dl>
                            <dl class="dl-shao">
                                <dt><a href="#" target="_blank">运动服</a></dt>
                                <dd>
                                    <a href="#" target="_blank">夹克</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">卫衣/套头衫</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">长裤</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">T恤</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">POLP衫</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">短裤</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">胸衣</a>
                                </dd>
                            </dl>
                            <dl class="dl-duo">
                                <dt><a href="#" target="_blank">关键词</a></dt>
                                <dd>
                                    <a href="#" target="_blank">专柜同款</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">夏季新品</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">贝壳头鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">SALE</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">玛丽珍</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">英伦风</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">休闲鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">运动鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">高跟鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">平底鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">细跟鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">粗跟鞋</a>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#">户外</a>
                    <!-- 户外 -->
                    <div class="listall">
                        <div class="listall-con">
                            <dl class="dl-first dl-shao">
                                <dt><a href="#" target="_blank">品牌</a></dt>
                                <dd>
                                    <a href="#" target="_blank">CAT</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">添柏岚</a>
                                </dd>
                            </dl>
                            <dl class="dl-shao">
                                <dt><a href="#" target="_blank">户外鞋</a></dt>
                                <dd>
                                    <a href="#" target="_blank">工装鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">休闲鞋</a>
                                </dd>
                            </dl>
                            <dl class="dl-shao">
                                <dt><a href="#" target="_blank">户外服</a></dt>
                                <dd>
                                    <a href="#" target="_blank">T恤</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">休闲裤</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">羽绒服</a>
                                </dd>
                            </dl>
                            <dl class="dl-shao">
                                <dt><a href="#" target="_blank">关键词</a></dt>
                                <dd>
                                    <a href="#" target="_blank">速干</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">大黄靴</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">热销TOP</a>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#">儿童</a>
                    <!-- 儿童 -->
                    <div class="listall">
                        <div class="listall-con">
                            <dl class="dl-first dl-shao">
                                <dt><a href="#" target="_blank">热门品牌</a></dt>
                                <dd>
                                    <a href="#" target="_blank">阿迪</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">耐克</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">三叶草</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">鬼冢虎</a>
                                </dd>
                            </dl>
                            <dl class="dl-shao">
                                <dt><a href="#" target="_blank">童鞋</a></dt>
                                <dd>
                                    <a href="#" target="_blank">复刻鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">休闲鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">篮球鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">跑步鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">训练鞋</a>
                                </dd>
                            </dl>
                            <dl class="dl-shao">
                                <dt><a href="#" target="_blank">童装</a></dt>
                                <dd>
                                    <a href="#" target="_blank">儿童套装</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">裤装</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">外套/风衣</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">卫衣</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">棉服/羽绒服</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">裙装</a>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="/goodslist">箱包</a>
                    <!-- 箱包 -->
                    <div class="listall">
                        <div class="listall-con">
                            <dl class="dl-first dl-duo">
                                <dt><a href="#" target="_blank">品牌</a></dt>
                                <dd>
                                    <a href="#" target="_blank">百丽箱包</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">百思图</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">天美意</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">他她</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">思加图</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">拔佳</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">真美诗</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">妙丽</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">圣伽步</a>
                                </dd>
                            </dl>
                            <dl class="dl-shao">
                                <dt><a href="#" target="_blank">热销推荐</a></dt>
                                <dd>
                                    <a href="#" target="_blank">2019新款</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">人气TOP</a>
                                </dd>
                            </dl>
                            <dl class="dl-shao">
                                <dt><a href="#" target="_blank">魅力女包</a></dt>
                                <dd>
                                    <a href="#" target="_blank">手提/手包</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">单肩/斜挎</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">双肩包</a>
                                </dd>
                            </dl>
                            <dl class="dl-shao">
                                <dt><a href="#" target="_blank">经典男包</a></dt>
                                <dd>
                                    <a href="#" target="_blank">单肩/斜挎</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">手提/手包</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">双肩包</a>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </li>
            </ul>

            <div class="search">
                <input type="text">
                <span></span>
            </div>
        </div>
    </div>

    <!-- banner图 -->
    <div class="bigbanner">
        <ul class="banner">
            <li class="play">
                <div class="banner-con"><img src="img/b1.jpg" alt=""></div>
            </li>
            <li>
                <div class="banner-con"><img src="img/b2.jpg" alt=""></div>
            </li>
        </ul>
        <!-- 轮播图圆点 -->
        <ul class="dotlist"></ul>
    </div>

    <!-- 新品推荐 -->
    <div class="recommemd">
        <h2>新品推荐</h2>
        <h6>
            <a href="javascript:;">男女鞋</a>
            <a href="javascript:;">运动</a>
        </h6>
        <div class="img-con">
            <div class="oimglist">
                <ul class="imglist">
                    <!-- 1 -->
                    <li>
                        <img src="img/p1.jpg" alt="">
                        <img src="img/w10.png" alt="" class="flag">
                        <p>商务 满帮鞋</p>
                        <span>￥&nbsp;&nbsp;729</span>
                    </li>
                    <li>
                        <img src="img/p2.jpg" alt="">
                        <img src="img/w10.png" alt="" class="flag">
                        <p>休闲 满帮鞋</p>
                        <span>￥&nbsp;&nbsp;529</span>
                    </li>
                    <li>
                        <img src="img/p3.jpg" alt="">
                        <img src="img/w5.png" alt="" class="flag">
                        <p>休闲 满帮鞋</p>
                        <span>￥&nbsp;&nbsp;489</span>
                    </li>
                    <li>
                        <img src="img/p4.jpg" alt="">
                        <img src="img/w10.png" alt="" class="flag">
                        <p>休闲 满帮鞋</p>
                        <span>￥&nbsp;&nbsp;529</span>
                    </li>
                    <!-- 2 -->
                    <li>
                        <img src="img/p5.jpg" alt="">
                        <img src="img/w3.png" alt="" class="flag">
                        <p>英伦 满帮鞋</p>
                        <span>￥&nbsp;&nbsp;629</span>
                    </li>
                    <li>
                        <img src="img/p2.jpg" alt="">
                        <img src="img/w10.png" alt="" class="flag">
                        <p>商务 满帮鞋</p>
                        <span>￥&nbsp;&nbsp;629</span>
                    </li>
                    <li>
                        <img src="img/p4.jpg" alt="">
                        <img src="img/w10.png" alt="" class="flag">
                        <p>商务 满帮鞋</p>
                        <span>￥&nbsp;&nbsp;529</span>
                    </li>
                    <li>
                        <img src="img/p3.jpg" alt="">
                        <img src="img/w10.png" alt="" class="flag">
                        <p>商务 满帮鞋</p>
                        <span>￥&nbsp;&nbsp;659</span>
                    </li>
                    <li>
                        <img src="img/p9.jpg" alt="">
                        <img src="img/w10.png" alt="" class="flag">
                        <p>商务 满帮鞋</p>
                        <span>￥&nbsp;&nbsp;429</span>
                    </li>
                    <li>
                        <img src="img/p10.jpg" alt="">
                        <img src="img/w10.png" alt="" class="flag">
                        <p>商务 满帮鞋</p>
                        <span>￥&nbsp;&nbsp;525</span>
                    </li>
                    <li>
                        <img src="img/p11.jpg" alt="">
                        <img src="img/w10.png" alt="" class="flag">
                        <p>商务 满帮鞋</p>
                        <span>￥&nbsp;&nbsp;629</span>
                    </li>
                    <li>
                        <img src="img/p9.jpg" alt="">
                        <img src="img/w10.png" alt="" class="flag">
                        <p>商务 满帮鞋</p>
                        <span>￥&nbsp;&nbsp;729</span>
                    </li>
                    <li>
                        <img src="img/p13.jpg" alt="">
                        <img src="img/w10.png" alt="" class="flag">
                        <p>商务 满帮鞋</p>
                        <span>￥&nbsp;&nbsp;546</span>
                    </li>
                    <li>
                        <img src="img/p3.jpg" alt="">
                        <img src="img/w10.png" alt="" class="flag">
                        <p>商务 满帮鞋</p>
                        <span>￥&nbsp;&nbsp;626</span>
                    </li>
                    <li>
                        <img src="img/p10.jpg" alt="">
                        <img src="img/w10.png" alt="" class="flag">
                        <p>商务 满帮鞋</p>
                        <span>￥&nbsp;&nbsp;729</span>
                    </li>
                    <li>
                        <img src="img/p4.jpg" alt="">
                        <img src="img/w10.png" alt="" class="flag">
                        <p>商务 满帮鞋</p>
                        <span>￥&nbsp;&nbsp;456</span>
                    </li>
                </ul>
            </div>
            <span class="left"></span>
            <span class="right"></span>
        </div>
    </div>

    <!-- 今日主推大牌 -->
    <div class="today">
        <h2>新品推荐</h2>
        <h6>
            <a href="javascript:;">男女鞋</a>
            <a href="javascript:;">运动</a>
        </h6>
        <div class="mianimg-con">
            <ul class="mainimg">
                <li>
                    <img src="img/m1.jpg" alt="">
                    <div class="black">
                        <img src="img/w9.png" alt="">
                    </div>
                </li>
                <li class="mid">
                    <img src="img/m2.jpg" alt="">
                    <div class="black">
                        <img src="img/w12.png" alt="">
                    </div>
                </li>
                <li>
                    <img src="img/m3.jpg" alt="">
                    <div class="black">
                        <img src="img/w4.png" alt="">
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <!-- 品牌潮流资讯 -->
    <div class="news">
        <h2>品牌潮流资讯</h2>
        <h4>BRAND FASHION</h4>
        <ul class="news-img">
            <li><img src="img/s1.jpg" alt=""></li>
            <li><img src="img/s2.jpg" alt=""></li>
            <li><img src="img/s3.jpg" alt=""></li>
        </ul>
        <ul class="news-botimg">
            <li>
                <img src="img/s4.jpg" alt="">
                <div class="bblack">
                    <p>大长腿神器的中空鞋</p>
                </div>
            </li>
            <li>
                <img src="img/s5.jpg" alt="">
                <div class="bblack">
                    <p>时髦精们的穆勒鞋</p>
                </div>
            </li>
            <li>
                <img src="img/s6.jpg" alt="">
                <div class="bblack">
                    <p>赚足回头率的Sneaker</p>
                </div>
            </li>
            <li>
                <img src="img/s7.jpg" alt="">
                <div class="bblack">
                    <p>你的酷男孩已上线</p>
                </div>
            </li>
        </ul>

        <div class="bigimg">
            <img src="img/b3.jpg" alt="">
            <img src="img/z.jpg" alt="">
        </div>
    </div>

    <div class="footer-top">
        <ul>
            <li>
                <span></span> 正品保证
            </li>
            <li>
                <span></span> 10天退换货
            </li>
            <li>
                <span></span> 10天调补差价额
            </li>
            <li>
                <span></span> 09:00--12:00在线客服
            </li>
        </ul>
    </div>

    <div class="footer-bot">
        <ul class="content">
            <li>
                <dl>
                    <dt>新手帮助</dt>
                    <dd>
                        <a href="#" target="_blank">交易条款协议</a>
                    </dd>
                    <dd>
                        <a href="#" target="_blank">注册新用户</a>
                    </dd>
                    <dd>
                        <a href="#">会员积分详情</a>
                    </dd>
                </dl>
            </li>
            <li class="item">
                <dl>
                    <dt>购物指南</dt>
                    <dd>
                        <a href="#">订购流程</a>
                    </dd>
                    <dd>
                        <a href="#">验货与签收</a>
                    </dd>
                    <dd>
                        <a href="#">订单配送</a>
                    </dd>
                </dl>
            </li>
            <li class="item">
                <dl>
                    <dt>支付/配送</dt>
                    <dd>
                        <a href="#">支付方式</a>
                    </dd>
                    <dd>
                        <a href="#">配送方式</a>
                    </dd>
                    <dd>
                        <a href="">配送时间及运费</a>
                    </dd>
                </dl>
            </li>
            <li class="item">
                <dl>
                    <dt>售后服务</dt>
                    <dd>
                        <a href="#">退换货政策</a>
                    </dd>
                    <dd>
                        <a href="#">退款说明</a>
                    </dd>
                    <dd>
                        <a href="#">发票制度</a>
                    </dd>
                </dl>
            </li>
            <li class="item">
                <dl>
                    <dt>会员服务</dt>
                    <dd>
                        <a href="#">找回密码</a>
                    </dd>
                    <dd>
                        <a href="#">联系我们</a>
                    </dd>
                    <dd>&nbsp;</dd>
                </dl>
            </li>
            <li class="item">
                <dl>
                    <dt>优购客服</dt>
                    <dd>
                        <a>在线咨询</a>
                    </dd>
                    <dd>
                        <a href="javascript:;">Email: ygservice@belle.com.cn
                    </a>
                    </dd>
                    <dd>
                        <a href="#">微信客服：优购时尚商城</a>
                    </dd>
                </dl>
            </li>
        </ul>

        <div class="three">
            <div class="t-left">
                <img src="img/n1.gif" alt="" style="width: 108px;height: 40px;">
                <img src="img/n2.png" alt="">
                <img src="img/n3.png" alt="">
            </div>
        </div>
        <ul class="about">
            <li>
                <a href="#">关于优购</a>|
            </li>
            <li>
                <a href="#">集团采购</a>|
            </li>
            <li>
                <a href="#">招贤纳士</a>|
            </li>
            <li>
                <a href="#">手机优购</a>|
            </li>
            <li>
                <a href="#">联系我们</a>|
            </li>
            <li>
                <a href="#">友情链接</a>
            </li>
        </ul>
        <p>Copyright © 2011-2016 Yougou Technology Co., Ltd.粤ICP备09070608号 深公网安备：4403101910665 粤公网安备 44030502000017号</p>
    </div>



</body>

</html>

<script src="jquery.min.js"></script>
<script src="index.js"></script>
<script>
    //动态生成小圆点
    $(".banner li").each(function() {
        $("<li></li>").appendTo($(".dotlist"))
    })

    //设置小圆点默认样式
    $(".dotlist li").eq(0).addClass("dot");

    //划过小圆点
    $(".dotlist li").mouseenter(function() {
        //显示第几个小圆点
        let n = $(this).index();

        $(".dotlist li").removeClass("dot");
        $(this).addClass("dot");

        $(".banner li").css("display", "none");
        // $(".banner li").removeClass("play");
        $(".banner li").eq(n).fadeIn();
    })

    //点击左右箭头
    let count = 0;
    $(".right").click(function() {
        count++;
        if (count <= 3) {

            $(".imglist").animate({
                marginLeft: -920 * count
            })
        } else {
            count = 3;
        }
        // console.log(count);

    })

    $(".left").click(function() {
        count--;
        if (count >= 0) {
            $(".imglist").animate({
                marginLeft: -920 * count
            })
        } else {
            count = 0;
        }
        // console.log(count);

    })

    //判断是否登录
    let uname = sessionStorage.getItem("uname");
    // console.log(uname);
    if (uname) {
        $(".bag a").attr("href", `/car?username=${uname}`);


        $(".first").html($('<a href="javascript:;" class="mylist">我的订单</a>'))

        $(".mylist").click(function() {
            let ispay = 1;

            $(this).attr("href", `/look?username=${uname}&ispay=${ispay}`)
        })
    } else {
        $(".bag a").click(function() {

            alert("请先登录/注册您的账号")
        })
    }
</script>